<template>
	<view class="recommend bg-color">
		<view class="recommend-item">
			<img class="item-big" src="@/static/img/Children.jpg" alt="" />
			<view class="item-small">
				<img class="item-img" src="@/static/img/Children1.jpg" alt="" />
				<img class="item-img" src="@/static/img/Children2.jpg" alt="" />
				<img class="item-img" src="@/static/img/Children3.jpg" alt="" />
			</view>
		</view>
		<view class="recommend-item">
			<img class="item-big" src="@/static/img/Furnishing.jpg" alt="" />
			<view class="item-small">
				<img class="item-img" src="@/static/img/Furnishing1.jpg" alt="" />
				<img class="item-img" src="@/static/img/Furnishing2.jpg" alt="" />
				<img class="item-img" src="@/static/img/Furnishing3.jpg" alt="" />
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style scoped>
	.recommend{
		padding: 20rpx;
	}
	.recommend-item{
		display: flex;
		flex-direction: column;
		border-radius: 20rpx;
		border: 2rpx solid #CCCCCC;
		overflow: hidden;
		margin: 10px 0;
	}
	.item-big{
		width: 100%;
		height: 300rpx;
	}
	.item-small{
		width: 100%;
		height: 240rpx;
	}
	.item-img{
		width: 33.33%;
		height: 240rpx;
	}
	
</style>